<template>
  <div v-loading="draggleLoading">
    <el-form-item label="优秀人员">
      <el-row>
        <el-col :span="12">
          <div class="draggable">
            <draggable :disabled="isDisabled" v-model="data.excellentArray" group="site" animation="300"
                       dragClass="dragClass"
                       ghostClass="ghostClass"
                       chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group class="draggable_area">
                <div class="u-player" v-for="item in data.excellentArray" :key="item.userId">{{ item.userName }}</div>
              </transition-group>
            </draggable>
          </div>
        </el-col>
      </el-row>
      <div v-if="showTip && !isDisabled">
        <span v-if="!isLeader && excellentNum>0" class="remarkText">根据激励规则计算，优秀人员最多选择 {{ excellentNum }} 人</span>
        <span v-else class="remarkText">激励规则中优秀规则未配置，不限制选择人数</span>
      </div>
    </el-form-item>
    <el-form-item label="良好人员">
      <el-row>
        <el-col :span="12">
          <div class="draggable">
            <draggable :disabled="isDisabled" v-model="data.goodArray" group="site" animation="300"
                       dragClass="dragClass"
                       ghostClass="ghostClass"
                       chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group class="draggable_area">
                <div class="u-player" v-for="item in data.goodArray" :key="item.userId">{{ item.userName }}</div>
              </transition-group>
            </draggable>
          </div>
        </el-col>
      </el-row>
      <div v-if="showTip && !isDisabled">
        <span v-if="!isLeader && goodNum>0" class="remarkText">根据激励规则计算，良好人员最多选择 {{ goodNum }} 人</span>
        <span v-else class="remarkText">激励规则中良好规则未配置，不限制选择人数</span>
      </div>
    </el-form-item>
    <el-form-item label="称职人员">
      <el-row>
        <el-col :span="12">
          <div class="draggable">
            <draggable :disabled="isDisabled" v-model="data.qualifiedArray" group="site" animation="300"
                       dragClass="dragClass"
                       ghostClass="ghostClass"
                       chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group class="draggable_area">
                <div class="u-player" v-for="item in data.qualifiedArray" :key="item.userId">{{ item.userName }}</div>
              </transition-group>
            </draggable>
          </div>
        </el-col>
      </el-row>
      <div v-if="!isDisabled">
        <span v-if="!isLeader && qualifiedNum >0" class="remarkText">根据激励规则计算，称职人员最多选择 {{ qualifiedNum }} 人</span>
        <span v-else class="remarkText">激励规则中称职规则未配置，不限制选择人数</span>
      </div>
    </el-form-item>
    <el-form-item label="基本称职人员">
      <el-row>
        <el-col :span="12">
          <div class="draggable">
            <draggable :disabled="isDisabled" v-model="data.almostArray" group="site" animation="300"
                       dragClass="dragClass"
                       ghostClass="ghostClass"
                       chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group class="draggable_area">
                <div class="u-player" v-for="item in data.almostArray" :key="item.userId">{{ item.userName }}</div>
              </transition-group>
            </draggable>
          </div>
        </el-col>
      </el-row>
      <div v-if="showTip && !isDisabled">
        <span v-if="!isLeader && almostNum >0" class="remarkText">根据激励规则计算，基本称职人员最多选择 {{ almostNum }} 人</span>
        <span v-else class="remarkText">激励规则中基本称职规则未配置，不限制选择人数</span>
      </div>
    </el-form-item>
    <el-form-item label="不称职人员">
      <el-row>
        <el-col :span="12">
          <div class="draggable">
            <draggable :disabled="isDisabled" v-model="data.unqualifiedArray" group="site" animation="300"
                       dragClass="dragClass"
                       ghostClass="ghostClass"
                       chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group class="draggable_area">
                <div class="u-player" v-for="item in data.unqualifiedArray" :key="item.userId">{{ item.userName }}</div>
              </transition-group>
            </draggable>
          </div>
        </el-col>
      </el-row>
      <div v-if="showTip && !isDisabled">
        <span v-if="!isLeader && unqualifiedNum >0" class="remarkText">根据激励规则计算，不称职人员最多选择 {{ unqualifiedNum }} 人</span>
        <span v-else class="remarkText">激励规则中不称职规则未配置，不限制选择人数</span>
      </div>
    </el-form-item>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import {getUserDeptInfo} from "@/api/system/user";
import {getPerformance} from "@/api/examine/performance/api";
import {getExamineInfo, listExamineUser} from "@/api/examine/user/api";
import {listByType} from "@/api/system/rules/rulesApi";
import {getTask} from "@/api/examine/task/api";

export default {
  components: {
    draggable
  },
  props: {
    isAdd: {
      type: Boolean,
      default: true
    },
    examineId: {
      type: String
    },
    isSubmitted: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    examineType: {
      type: Number
    },
    isReject: {
      type: Number,
      default:0
    }
  },
  data() {
    return {
      isLeader:false,
      drag: false,
      draggleLoading:false,
      excellentNum: 1,
      goodNum: 1,
      qualifiedNum: 1,
      unqualifiedNum: 1,
      almostNum: 1,
      data: {
        excellentArray: [],
        goodArray: [],
        almostArray: [],
        qualifiedArray: [],
        unqualifiedArray: []
      },
      showTip: false,
    };
  },
  methods: {
    checkUserCategory() {
      // 绩效中层管理考核
      if ( this.examineType == 0 && this.$store.state.user.category.indexOf('1') !==-1) {
        // 高层类型
        this.isLeader = true
      }
    },
    searchPerson() {
      // 查询激励规则
      if (this.isSubmitted && this.isReject !== -1) {
        // 考评仅选择已提交考核的人员
        listExamineUser({examineId: this.examineId, isSubmitted: 1}).then(resp => {
          if (resp.rows) {
            resp.rows.map(m => {
              if (m.examineResult === 4) {
                this.data.almostArray.push(Object.assign({}, {userId: m.userId, userName: m.userName}))
              }
              if (m.examineResult === 3) {
                this.data.excellentArray.push(Object.assign({}, {userId: m.userId, userName: m.userName}))
              }
              if (m.examineResult === 2) {
                this.data.goodArray.push(Object.assign({}, {userId: m.userId, userName: m.userName}))
              }
              if (m.examineResult === 1) {
                this.data.qualifiedArray.push(Object.assign({}, {userId: m.userId, userName: m.userName}))
              }
              if (m.examineResult === 0) {
                this.data.unqualifiedArray.push(Object.assign({}, {userId: m.userId, userName: m.userName}))
              }
              if (m.examineResult === null) {
                this.data.unqualifiedArray.push(Object.assign({}, {userId: m.userId, userName: m.userName}))
              }
            })
          }
          this.getRulesPersonNum(this.data.unqualifiedArray.length)
          this.showTip = true
        })
      } else {
        if (this.isAdd) {
          // 新增初始化不称职人员为所有人
          getUserDeptInfo().then(resp => {
            if (resp.data.dataAuthDeptList) {
              var index = resp.data.dataAuthDeptList.findIndex(f => f.userId == this.$store.state.user.id)
              resp.data.dataAuthDeptList.forEach(f=>{
                if(f.userId !== this.$store.state.user.id){
                  this.data.unqualifiedArray.push(f)
                }
              })
            }
            this.getRulesPersonNum(resp.data.dataAuthDeptList.length)
            this.showTip = true
          });
        } else {
          this.queryExamine()
        }
      }
    },
    queryExamine() {
      // 编辑初始化人员列表
      getPerformance(this.examineId).then(resp => {
        this.data.excellentArray = resp.data.excellentPersonList
        this.data.goodArray = resp.data.goodPersonList
        this.data.almostArray = resp.data.almostPersonList
        this.data.qualifiedArray = resp.data.qualifiedPersonList
        this.data.unqualifiedArray = resp.data.unqualifiedPersonList

        var length = resp.data.excellentPersonList.length + resp.data.goodPersonList.length + resp.data.qualifiedPersonList.length + resp.data.unqualifiedPersonList.length
        this.getRulesPersonNum(length)
        this.showTip = true
      })
    },
    getRulesPersonNum(allNumLength) {
      if (this.examineType === 0) {
        // 绩效考核规则取配置
        listByType(this.examineType).then(rulesResp => {
          // 查询优秀最多可加入人数
          var excellentRules = rulesResp.rows.filter(f => f.status == 3);
          if (excellentRules && excellentRules[0].personScale) {
            this.excellentNum = (excellentRules[0].personScale / 100 * allNumLength).toFixed(0) >0? (excellentRules[0].personScale / 100 * allNumLength).toFixed(0):1
          } else {
            this.excellentNum = -1;
          }
          // 查询良好最多可加入人数
          var goodRules = rulesResp.rows.filter(f => f.status == 2);
          if (goodRules && goodRules[0].personScale) {
            this.goodNum = (goodRules[0].personScale / 100 * allNumLength).toFixed(0) >0?(goodRules[0].personScale / 100 * allNumLength).toFixed(0):1
          } else {
            this.goodNum = -1;
          }

          // 查询称职最多可加入人数
          var qualifiedRules = rulesResp.rows.filter(f => f.status == 1);
          if (qualifiedRules && qualifiedRules[0].personScale) {
            this.qualifiedNum = (qualifiedRules[0].personScale / 100 * allNumLength).toFixed(0)>0?(qualifiedRules[0].personScale / 100 * allNumLength).toFixed(0):1
          } else {
            this.qualifiedNum = -1;
          }
          // 查询称职最多可加入人数
          var unqualifiedRules = rulesResp.rows.filter(f => f.status == 0);
          if (unqualifiedRules && unqualifiedRules[0].personScale) {
            this.unqualifiedNum = (unqualifiedRules[0].personScale / 100 * allNumLength).toFixed(0)>0?(unqualifiedRules[0].personScale / 100 * allNumLength).toFixed(0):1
          } else {
            this.unqualifiedNum = -1;
          }

          // 查询基本称职最多可加入人数
          var almostRules = rulesResp.rows.filter(f => f.status == 4);
          if (almostRules && almostRules[0].personScale) {
            this.almostNum = (almostRules[0].personScale / 100 * allNumLength).toFixed(0)>0?(almostRules[0].personScale / 100 * allNumLength).toFixed(0):1
          } else {
            this.almostNum = -1;
          }
        })
      } else {
        getExamineInfo(this.examineId).then(rulesResp => {
          // 查询优秀最多可加入人数
          var excellentRules = rulesResp.data;
          if (excellentRules.excellentPersonScale) {
            this.excellentNum = (excellentRules.excellentPersonScale / 100 * allNumLength).toFixed(0) == 0 ? 1 : (excellentRules.excellentPersonScale / 100 * allNumLength).toFixed(0)
          } else {
            this.excellentNum = -1;
          }
          // 查询良好最多可加入人数
          var goodRules = rulesResp.data;
          if (goodRules.goodPersonScale) {
            this.goodNum = (goodRules.goodPersonScale / 100 * allNumLength).toFixed(0) == 0 ? 1 : (goodRules.goodPersonScale / 100 * allNumLength).toFixed(0)
          } else {
            this.goodNum = -1;
          }

          // 查询称职最多可加入人数
          var qualifiedRules = rulesResp.data;
          if (qualifiedRules.qualifiedPersonScale) {
            this.qualifiedNum = (qualifiedRules.qualifiedPersonScale / 100 * allNumLength).toFixed(0) == 0 ? 1 : (qualifiedRules.qualifiedPersonScale / 100 * allNumLength).toFixed(0)
          } else {
            this.qualifiedNum = -1;
          }
          // 查询称职最多可加入人数
          var unqualifiedRules = rulesResp.data;
          if (unqualifiedRules.unqualifiedPersonScale) {
            this.unqualifiedNum = (unqualifiedRules.unqualifiedPersonScale / 100 * allNumLength).toFixed(0) == 0 ? 1 : (unqualifiedRules.unqualifiedPersonScale / 100 * allNumLength).toFixed(0)
          } else {
            this.unqualifiedNum = -1;
          }

          // 查询基本称职最多可加入人数
          var almostRules = rulesResp.data;
          if (almostRules.almostPersonScale) {
            this.almostNum = (almostRules.almostPersonScale / 100 * allNumLength).toFixed(0) == 0 ? 1 : (almostRules.almostPersonScale / 100 * allNumLength).toFixed(0)
          } else {
            this.almostNum = -1;
          }
        })
      }

    },
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },
    submitData() {
      return this.data;
    }
  },
  created() {
    this.draggleLoading=true;
    this.checkUserCategory();
    setTimeout(()=>{
       this.searchPerson()
      this.draggleLoading=false;
    },1000);
  }
};
</script>
<style lang="scss" scoped>
.draggable {
  width: 600px;
  height: 150px;
  border: solid 1px #eee;
  border-radius: 5px;

  .u-player {
    margin-top: 10px;
    margin-left: 10px;
    display: inline-block;
    color: #0079DD;
    background: #F0F7FD;
    font-size: 14px;
    font-weight: 400;
    padding: 3px 5px;
    border-radius: 6px;
    cursor: move;

    &:not(:last-child) {
      //margin-right: 16px;
    }
  }
}

// 拖拽默认空间
.draggable_area {
  min-height: 120px;
  display: block;
}

.chosen { // 选择元素的样式
  background: #666 !important;
  color: #fff !important;
}

.el-form-item__content {
  line-height: unset !important;
}

.ghost { // 目标位置占位符的样式及需要停靠位置的样式
  background: #1890FF !important;
}

.remarkText {
  font-size: 12px;
  color: #AAAAAA;
}
</style>
